<template>
  <div>
    <preHeader></preHeader>
    <div class="top-block"></div>
    <mt-field label="姓名" placeholder="请输入真实姓名" v-model='name'></mt-field>
    <mt-field label="银行卡号" placeholder="请输入新的银行卡号" v-model='bank_no'></mt-field>
    <mt-field label="	银行名称" placeholder="请输入新的银行名称" v-model='bank_name'></mt-field>
    <mt-radio
      title="银行卡类型"
      v-model="value"
      :options="options"
      >
    </mt-radio>
    <mt-button @click='btnSure()'>确认</mt-button>
  </div>
</template>

<script>
  import {save_bankinfo,get_bankinfo} from '@/api/';
  export default {
    data(){
      return{
        value:'1',
        options : [{
        		    label: '储蓄卡',
        		    value: '1'
        			},
        			{
        		    label: '信用卡',
        		    value: '2'
        			}],
        tel:'',
        name:'',//姓名
        bank_no:'',//银行卡号
        bank_name:'',//银行名称
      }
    },
    methods:{
      getInfo(){
        this.tel = JSON.parse(localStorage.getItem('tel'));
        get_bankinfo({tel:this.tel}).then(res =>{
          this.name = res.data.name;
          this.bank_no = res.data.bank_no;
          this.bank_name = res.data.bank_name;
          this.value = res.data.type;
        })
      },
      btnSure(){

        var pattern =  /^([1-9]{1})(\d{14}|\d{18})$/ ;
        if(!pattern.test(this.bank_no)){
          this.$messagebox.alert('请输入正确的银行卡号！')
        }else{
          save_bankinfo({tel:this.tel,bank_no:this.bank_no,name:this.name,bank_name:this.bank_name,type:this.value}).then(res =>{
            // console.log(res)
            this.$messagebox.alert('修改成功！').then( action =>{
              if(action == 'confirm'){
                this.$router.push('/contract')
              }
            })

          })
        }

      }
    },
    mounted() {
      this.getInfo()
    }
  }
</script>

<style scoped>
  /deep/  .mint-cell:last-child{background-image: none;}
   /deep/ .mint-radiolist-title{font-size: 16px;line-height: 30px;color: #333;}
  /deep/.mint-radiolist > *{float: left;}
  /deep/.mint-radiolist .mint-cell-wrapper{background-image: none;}
.mint-button{position: fixed;bottom: 2em; width: 150px;border-radius: 20px;background-color: rgb(47, 57, 83);color: #fff;left: 50%;transform: translateX(-50%);}
.mint-field /deep/ .mint-cell-wrapper{border-bottom: 1px solid #ccc;}
</style>
